<template>
    <div class="setting-box">
        <a-form-model
            layout="vertical"
            :model="form"
            :rules="rules"
            class="setting-form"
        >
            <a-form-model-item :label="i18n('setting.url','应用URL')" prop="url">
                <a-input v-model="form.url" style="width: 100%"/>
            </a-form-model-item>
            <a-form-model-item :label="i18n('setting.method','测试接口')" prop="method">
                <a-input v-model="form.method" style="width: 100%"/>
            </a-form-model-item>
            <a-form-model-item :label="i18n('setting.appKey','应用密钥')" prop="appKey">
                <a-input v-model="form.appKey" style="width: 100%"/>
            </a-form-model-item>
        </a-form-model>
        <div class="setting-toolbar">
            <a-button type="primary" @click="ok">{{ i18n('save', '保存') }}</a-button>
            <a-button type="primary" @click="testConnect">{{ i18n('testConnect', '测试连接') }}</a-button>
            <a-button type="primary" @click="closeWindow">{{ i18n('close', '关闭') }}</a-button>
        </div>
    </div>

</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2025-03-28 11:19
 */

import {Util} from '@lowcode/jpaas-common-lib';
import SysPluginApi from "@/api/system/core/sysPlugin";

export default {
    name: "settingDialog",
    props: ["layerid", "destroy", "setting", "item"],
    data() {
        return {
            form: {
                url: '',
                method: '',
                appKey: ''
            },
            rules:{
                url:[{required:true,message:'应用URL必填'}],
                method:[{required:true,message:'测试接口必填'}],
                appKey:[{required:true,message:'应用密钥必填'}],
            }
        }
    },
    created() {
        if (this.setting) {
            this.form = JSON.parse(this.setting)[this.item.alias];
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "PluginCenter", key);
        },
        ok() {
            if (!this.form.url) {
                this.$message.error(this.i18n('setting.url', '应用URL', 'input'));
                return;
            } else if (!this.form.appKey) {
                this.$message.error(this.i18n('setting.appKey', '应用密钥', 'input'));
                return;
            }
            let json = this.setting ? JSON.parse(this.setting) : {};
            json[this.item.alias] = {open: this.item.open, ...this.form};
            Util.closeWindow(this, "ok", json);
        },
        testConnect() {
            let self = this;
            SysPluginApi.testConnect(this.form).then(res => {
                if (res.success) {
                    self.$message.success(self.i18n('connectSuccess', '连接成功！'));
                } else {
                    self.$message.error(self.i18n('connectFail', '连接失败！'));
                }
            })
        },
        closeWindow() {
            Util.closeWindow(this, "cancel");
        }
    }
}
</script>

<style scoped>
.setting-form {
    padding: 16px;
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.setting-box {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.setting-toolbar {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    border-top: 1px solid rgba(232, 232, 232, 1);
}
</style>